
<template>
	<view class="page-container">
		<view class="login-top-bg">
			<uni-title title="账号注册" type="h1" color="#fff"></uni-title>
			<view class="sub-title" style="color: aliceblue;">
				欢迎注册智慧校园系统
			</view>
		</view>
		<view class="login-container">
			<uni-title title="账号注册" type="h3" align="center"></uni-title>
			<view class="login-wrap">
				<uni-forms ref="loginform" :rules="rules" :model="formData">
					<uni-forms-item label="用户名" name="username" label-width="80px" label-align="right">
						<uni-easyinput v-model="formData.username" placeholder="请输入用户名">
							<template></template>
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="密码" name="password" label-align="right" label-width="80px">
						<uni-easyinput v-model="formData.password" type="password" clearable />
					</uni-forms-item>
					<uni-forms-item label="确认密码" name="password2" label-align="right" label-width="80px">
						<uni-easyinput v-model="formData.password2" type="password" clearable />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="handlSubmitRegister">提交</button>
			</view>
			<view style="display: flex;justify-content: center;margin-top: 100px;">
				<view style="width: 100%;height: 80px;text-align: center;" @click="handleToLogin">
					<view>已有账号？直接登录</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
import { register } from '../../common/js/api/user'

	export default {
		data() {
			return {
				formData: {
					username: '',
					password: '',
					password2:''
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请填写用户名',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请填写密码',
						}]
					}

				},
				validateTrigger: 'submit'
			}
		},
		methods: {
			handlSubmitRegister(){
				console.log(this.formData)
				// if(!(this.formData.username && this.formData.username.length >= 4 && this.formData.username <= 16)){
				// 	uni.showModal({
				// 		title:'错误提示',
				// 		content:'账号不附合规则'
				// 	})
				// 	return
				// }
				register(this.formData).then(res=>{
					console.log(res);
					uni.showToast({
						title:'注册成功',
						icon:'success'
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},2500)
				})
			},
			handleToLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style scoped>
	.page-container {
		padding: 16px;
	}

	.login-container {
		position: relative;
		margin-top: 100px;
		border-radius: 10px;
		padding: 10px;
		background-color: #ffffff;
		z-index: 10;
	}

	.sub-title {
		color: #666666;
		line-height: 2;
	}

	.login-wrap {
		margin-top: 20px;
	}

	.login-top-bg {
		height: 120px;
		top: 0;
		left: 0;
		width: 100vw;
		padding: 16px;
		position: absolute;
		z-index: 1;
		background: url("@/static/bg2.png");
	}
</style>